<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
ul,li{list-style: none}
ul li{ 
       width:300px; 
	   height:100px;
	   background:#F33;
	   margin-bottom: 30px
	   }
/*#div1 span{ 
           width:50px; 
		   height:50px; 
		   position:absolute;
		   left:300px; 
		   top:125px;  
		   background:#4f88c8;
		   text-align:center;
		   line-height:50px
		   }*/
</style>
 <script>
 window.onload=function()
{
	var aLi=document.getElementsByTagName('li');//获得元素
	    for(var i=0;i<aLi.length;i++){
	    aLi[i].timer=null;
		aLi[i].onmouseover=function()//移入事件
		{
			startMove(this,1200);
			}
			aLi[i].onmouseout=function()//移出事件
		{
			startMove(this,300);
			}
		}
	}
	/*var timer=null;*/
	    function startMove(obj,iTarget){//定义函数
        clearInterval(obj.timer);   //清空事件以免重复触发
        /*var oDiv=document.getElementById('div1');*///函数内获取元素
		obj.timer=setInterval(function(){   //定义定时器
		var speed=(iTarget-obj.offsetWidth)/8; 
		speed=speed>0?Math.ceil(speed):Math.floor(speed);                           //定义速度属性
		/*if(obj.offsetWidth>iTarget)           //判断当前的left值与目标值的关系
		{
			speed=-10;                         //大于目标值速度则是负值
		}
		else
		{
			speed=10;                          //否则速度则是正值
		}*/
		if(obj.offsetWidth==iTarget)           //等于目标值则停止运动
		{
			clearInterval(obj.timer)               //清空定时器
		}
		else{
			obj.style.width=obj.offsetWidth+speed+"px";    //运动速度
		}
			
		},30)
	}
</script>
</head>

<body>
<!-- <div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div> -->
<ul>
<li></li>
<li></li>
<li></li>

</ul>

</body>
</html>
